<template>
	<div class="addBomb">
		<div class="title">增加炸弹</div>
		<input type="text" placeholder="炸弹名" v-model="name" />
		<input type="text" placeholder="炸弹类型" v-model="type" />
		<div class="button" @click="addBomb">确定</div>
	</div>
</template>

<script>
import axios from 'axios';
import { showTip } from '../../../assets/js/tip';
export default {
	name: 'addbomb',
	data() {
		return {
			name: '',
			type: '',
		};
	},
	methods: {
		async addBomb() {
			if (this.name === '' || this.type === '') {
				showTip('炸弹名或者类型不能为空！');
				return;
			}
			try {
				const response = await axios({
					method: 'POST',
					url: '/api/bomb/add',
					data: {
						name: this.name,
						type: this.type,
					},
				});
				if (!response.data.success) {
					showTip('添加失败！' + response.data.message);
					return;
				}
				showTip('添加成功！');
			} catch (error) {
				showTip('添加失败！' + error.response.data.message);
			}
		},
	},
};
</script>

<style lang="scss" scope>
.addBomb {
	position: absolute;
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	user-select: none;
	border: rgb(255, 0, 85) 2px solid;
	border-radius: 3px;
	height: 200px;
	width: 275px;
	left: 5px;
	top: 80px;

	.title {
		font-size: 24px;
	}

	.button {
		font-size: 23px;
		width: 57px;
		height: 28px;
		line-height: 28px;
		text-align: center;
		cursor: pointer;

		&:hover {
			color: white;
			background-color: blue;
			border-radius: 5px;
		}
	}

	input {
		outline: none;
		height: 24px;
		font-size: 18px;
		border-radius: 5px;
		border: rgb(74, 74, 255) 1.5px solid;

		&:focus {
			box-shadow: 0 0 3px 1px rgb(97, 97, 255);
		}
	}
}
</style>